@extends('admin.base')

@section('content')
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto layui-form">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-block">
                        <input type="text" id="loginname" name="loginname" placeholder="请输入" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">角色</label>
                    <div class="layui-input-block">
                        <select id="role" name="role">
                            <option value="">请选择</option>
                            @foreach($roles as $role)
                                <option value="{{$role->id or ''}}">{{$role->display_name or  ''}}</option>
                            @endforeach
                        </select>
                        <div class="layui-unselect layui-form-select">
                            <div class="layui-select-title"><input type="text" placeholder="请选择" value="管理员" readonly=""
                                                                   class="layui-input layui-unselect"><i
                                        class="layui-edge"></i></div>
                            <dl class="layui-anim layui-anim-upbit">
                                <dd lay-value="0" class="layui-this">管理员</dd>
                                <dd lay-value="1" class="">超级管理员</dd>
                                <dd lay-value="2" class="">纠错员</dd>
                                <dd lay-value="3" class="">采购员</dd>
                                <dd lay-value="4" class="">推销员</dd>
                                <dd lay-value="5" class="">运营人员</dd>
                                <dd lay-value="6" class="">编辑</dd>
                            </dl>
                        </div>
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn layuiadmin-btn-admin layui-btn-normal" id="user_search">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn "></i>搜 索
                    </button>
                </div>
            </div>
        </div>

        <div class="layui-card-body">

            <div class="layui-btn-container" style="margin-bottom: 10px;">
                @can('system.user.destroy')
                    <button style="margin-bottom: 0px" class="layui-btn layui-btn-danger" id="listDelete">删 除</button>
                @endcan

                @can('system.user.store')
                    <button style="margin-bottom: 0px" class="layui-btn  layui-btn-normal" id="addAdminUser">新 增
                    </button>
                @endcan
            </div>

            <table id="dataTable" lay-filter="dataTable"></table>
            <script type="text/html" id="options">
                <div class="layui-btn-group">
                    @can('system.user.store')
                        <a class="layui-btn layui-btn-sm layui-btn-normal" lay-event="edit">
                            <i class="layui-icon">&#xe642;</i>编辑</a>
                    @endcan
                    @can('system.user.assignRole')
                        <a class="layui-btn layui-btn-sm  layui-btn-warm" lay-event="role"><i class="layui-icon">&#xe615;</i>角色</a>
                    @endcan
                    @can('system.user.assignPermission')
                            <a class="layui-btn layui-btn-sm layui-btn-normal" lay-event="permission"><i class="layui-icon">&#xe673;</i>权限</a>
                    @endcan

                </div>
            </script>
        </div>

    </div>
@endsection
@section('script')
    @can('system.user')
        <script>
            layui.use(['layer', 'table', 'form'], function () {
                var layer = layui.layer;
                var table = layui.table;
                var load = layer.load();
                var where = {
                    sorts: {},
                    like:{},
                    is:{}
                }
                //用户表格初始化
                var dataTable = table.render({
                    elem: '#dataTable'
                    , height: 600
                    , url: "{{ route('system.user.data') }}" //数据接口
                    , where: where
                    , loading: false
                    , autoSort: false
                    , limits: [10, 15, 30]
                    , limit: 15
                    , page: {theme: '#1E9FFF'} //开启分页
                    , cols: [[ //表头
                        {checkbox: true, fixed: true}
                        , {field: 'id', title: 'ID', sort: true, width: 60}
                        , {field: 'name', sort: true, title: '用户名'}
                        , {field: 'email', title: '邮箱'}
                        , {field: 'phone', title: '电话'}
                        , {field: 'created_at', title: '创建时间'}
                        , {field: 'updated_at', title: '更新时间'}
                        , {fixed: 'right', width: 320, align: 'center', toolbar: '#options'}
                    ]],
                    done: function (res, curr, count) {
                        layer.closeAll();
                    }
                });

                //搜索点击事件
                $("#user_search").click(function () {
                    where.like.name = '%'+$("#loginname").val()+'%';
                    where.user_role = $("#role").val();
                    var load = layer.load();
                    dataTable.reload();
                })

                //监听排序
                table.on('sort(dataTable)', function (obj) {
                    where.sorts = {};
                    where.sorts[obj.field] = obj.type;
                    var load = layer.load();
                    dataTable.reload();
                });

                //监听工具条
                table.on('tool(dataTable)', function (obj) { //注：tool是工具条事件名，dataTable是table原始容器的属性 lay-filter="对应的值"
                    var data = obj.data //获得当前行数据
                        , layEvent = obj.event; //获得 lay-event 对应的值
                    if (layEvent === 'del') {
                        layer.confirm('确认删除吗？', function (index) {
                            $.post("{{ route('system.user.destroy') }}", {
                                _method: 'delete',
                                ids: [data.id]
                            }, function (result) {
                                if (result.code == 0) {
                                    obj.del(); //删除对应行（tr）的DOM结构
                                }
                                layer.close(index);
                                layer.msg(result.msg, {icon: 6})
                            });
                        });
                    } else if (layEvent === 'edit') {
                        layerIfram('修改管理员', '/admin/user/' + data.id + '/edit');
                    } else if (layEvent === 'role') {
                        layer.full(layerIfram('设置角色', '/admin/user/' + data.id + '/role'), 1000, 400);
                    } else if (layEvent === 'permission') {
                        layer.full(layerIfram('设置权限', '/admin/user/' + data.id + '/permission'), 600, 400);
                    }
                });

                //按钮批量删除
                $("#listDelete").click(function () {
                    var ids = []
                    var hasCheck = table.checkStatus('dataTable')
                    var hasCheckData = hasCheck.data
                    if (hasCheckData.length > 0) {
                        $.each(hasCheckData, function (index, element) {
                            ids.push(element.id)
                        })
                    }
                    if (ids.length > 0) {
                        layer.confirm('确认删除吗？', function (index) {
                            $.post("{{ route('system.user.destroy') }}", {
                                _method: 'delete',
                                ids: ids
                            }, function (result) {
                                if (result.code == 0) {
                                    dataTable.reload()
                                }
                                layer.close(index);
                                layer.msg(result.msg, {icon: 6})
                            });
                        })
                    } else {
                        layer.msg('请选择删除项', {icon: 5})
                    }
                })

                //添加管理员
                $("#addAdminUser").click(function () {
                    layerIfram('添加管理员', '{{ route('system.user.create') }}');
                })

                //封装弹出层
                function layerIfram(url, title, w = 493, h = 580) {
                    var iframlayer = layer.open({
                        type: 2,
                        title: url,
                        shadeClose: true,
                        shade: false,
                        maxmin: true, //开启最大化最小化按钮
                        area: [w + 'px', h + 'px'],
                        content: title
                    });
                    return iframlayer;
                }
            })
        </script>
    @endcan
@endsection



